<template>
  <div class="com_carInfo-wrapper" id="com_carInfo-wrapper">
    <div class="com_carInfo-view">
      <div class="car-logo flex-shrink">
        <img :src="carInfoData.autoBrandLogo" alt />
      </div>
      <div class="car-info-view overflowHidden">
        <div class="car-info-title text-overflow">{{ auto_text }}</div>
        <div class="car-info-content">
          <div class="car-info-vin">{{ vin }}</div>
          <div class="car-info-detail lusir-common_cursor" @click="jumpToNeedPurchaseShopVipPage" v-show="NeedPurchaseShopVipStatus == 1" v-if="autoDetails.length > 0">车型详情</div>
        </div>
      </div>
    </div>

    <comCarDetailsWrapper @closeCarDetails="closeCarDetails" v-if="isShowCarDetailsView" :autoDetails="autoDetails" :selectorQueryEleMerge="selectorQueryEleMerge"></comCarDetailsWrapper>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import comCarDetailsWrapper from "./com-carDetails-wrapper";
export default {
  name: "comCarInfoWrapper",
  props: {
    // 是否要vin码加密显示
    vinEncrypt: {
      type: Boolean,
      default: false
    },
    selectorQueryEle: {
      type: Array,
      default: []
    },
    vin: {
      type: String,
      default: ""
    },
    subid: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      carInfoData: {},
      auto_text: "",
      autoDetails: [],
      isShowCarDetailsView: false, // 是否展示车型详情
      selectorQueryEleMerge: [], // 合并后的当前需要知道宽高的元素的id集合
      NeedPurchaseShopVipStatus: 0, // -1是不需要买  0是初始  1是需要
    };
  },
  mounted() {
    if (this.cangpei_param_ccd) {
      this.NeedPurchaseShopVip();
    }
    this.getVinParamByVin(); // 获取车型信息列表
    this.getAutoInfoByVin(); // 获取车型详情
    this.selectorQueryEleMerge = [
      ...this.selectorQueryEle,
      "com_carInfo-wrapper"
    ];
  },
  computed: {
    ...mapGetters([
      "cangpei_param_gcd",
      "cangpei_param_ccd",
      "cangpei_param_ucd",
    ])
  },
  methods: {
    jumpToNeedPurchaseShopVipPage() {
      this.$router.push({
        path: `/simpleVinDetail`,
        query: {
          vin: this.vin
        }
      });
    },
    // 是否需要购买云店VIP
    async NeedPurchaseShopVip() {
      const res = await this.$imServive({
        url: "/IMUser/NeedPurchaseShopVip",
        data: {
          // imConsultantCode: "@ZPT0001239"
          imConsultantCode: this.cangpei_param_ccd
        },
      });
      this.NeedPurchaseShopVipStatus = 1;
    },
    // 收起
    closeCarDetails() {
      this.isShowCarDetailsView = false;
    },
    openOrCloseCarDetails() {
      this.isShowCarDetailsView = !this.isShowCarDetailsView;
    },
    // 获取车型详情
    async getAutoInfoByVin() {
      const res = await this.$imServive({
        url: "/Auto/GetAutoInfoByVin",
        data: {
          vinCode: this.vin,
          autoSubId: this.subid
        }
      });
      this.autoDetails = res.AutoParamGroups || [];
    },
    //获取精友参数
    async getVinParamByVin() {
      const res = await this.$imServive({
        url: "/Auto/GetJYAutoByVin",
        data: {
          vinCode: this.vin,
          autoSubId: this.subid
        },
      });

      this.carInfoData = res[0].VinAutoBase;
      this.auto_text = this.build_autoText();
    },
    //VIN码文案
    build_vinText() {
      if (this.vinEncrypt && this.vin) {
        return this.vin.replace(/(\w{6})\w{5}/, "$1*****");
      } else {
        return this.vin;
      }
    },
    //车型文案
    build_autoText() {
      if (this.vin && this.vin.length > 0) {
        //VIN码请求模式
        if (this.carInfoData) {
          return (
            this.carInfoData.autoBrandName +
            " " +
            this.carInfoData.autoModelName
          );
        } else {
          return "";
        }
      } else {
        //车型请求模式
        if (this.carInfoData) {
          return (
            this.carInfoData.autoBrandName +
            " " +
            this.carInfoData.autoModelName +
            " " +
            this.carInfoData.autoModelSubName
          );
        } else {
          return "";
        }
      }
    }
  },
  components: {
    comCarDetailsWrapper
  }
};
</script>

<style scpoed lang="stylus">
.com_carInfo-wrapper
  padding 0.32rem
  width 100%
  background #fff
  box-sizing border-box
  .com_carInfo-view
    width auto
    height 1.28rem
    padding 0.26666666666666666rem 0.28rem
    background #f6f6f6
    display flex
    align-items center
  .car-logo
    width 1.0666666666666667rem
    height 1.0666666666666667rem
    border-radius 50%
    overflow hidden
    background #fff
    img
      width 100%
      height 100%
  .car-info-view
    height 100%
    margin-left 0.24rem
    flex 1
    display flex
    flex-direction column
    justify-content space-between
    &::before, &::after
      content ''
      display block
    .car-info-title
      width 100%
      height auto
      font-size 0.36rem
      line-height 0.64rem
      color #282828
      white-space nowrap
    .car-info-content
      display flex
      justify-content space-between
      align-items center
      .car-info-vin
        width auto
        font-size 0.32rem
        color #666
        display flex
        align-items center
      .car-info-detail
        font-size 0.32rem
        color #377de8
</style>
